<template>
    <div class="installBody">
        <el-tabs type="border-card" tab-position="left" value="0">
            <el-tab-pane label="个人信息">
                <el-form
                    ref="form1"
                    :model="form1"
                    :rules="rule1"
                    label-position="right"
                    label-width="80px"
                    status-icon
                >
                    <el-form-item label="名字" prop="name">
                        <el-input v-model="form1.name" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="six">
                        <el-radio-group v-model="form1.six" size="medium">
                            <el-radio border label="男"></el-radio>
                            <el-radio border label="女"></el-radio>
                            <el-radio border label="保密"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="居住城市" prop="city">
                        <el-input v-model="form1.city" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介" prop="intro">
                        <el-input
                            type="textarea"
                            v-model="form1.intro"
                            rows="3"
                            placeholder="例：摄影师/徒步旅行/自驾游爱好者/潜水爱好者"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form1')">立即修改</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="上传头像">
                <form>
                    <input type="file" name="headerImg" accept="image/*" @change="cropping" />
                    <el-button type="primary">发送</el-button>
                </form>
            </el-tab-pane>
            <el-tab-pane label="实名绑定">
                <el-form
                    ref="form2"
                    :model="form2"
                    :rules="rule2"
                    label-position="right"
                    label-width="100px"
                    status-icon
                >
                    <el-form-item label="真实名字" prop="name">
                        <el-input v-model="form2.name" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="真实性别" prop="six">
                        <el-radio-group v-model="form2.six" size="medium">
                            <el-radio border label="男"></el-radio>
                            <el-radio border label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="身份证号码" prop="num">
                        <el-input v-model="form2.num" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="form2.phone" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form2')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="通知管理">
                <div>
                    <label class="tzSwitch">
                        <div>接收组队消息(手机通知)</div>
                        <el-switch
                            v-model="notice.team"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </label>

                    <label class="tzSwitch">
                        <div>接收陌生人消息</div>
                        <el-switch
                            v-model="notice.sys1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </label>
                    <label class="tzSwitch">
                        <div>接收文章评论消息</div>
                        <el-switch
                            v-model="notice.sys2"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </label>
                    <label class="tzSwitch">
                        <div>接收文章点赞消息</div>
                        <el-switch
                            v-model="notice.sys3"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </label>
                    <label class="tzSwitch">
                        <div>接收文章收藏消息</div>
                        <el-switch
                            v-model="notice.sys4"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </label>
                </div>
            </el-tab-pane>
            <el-tab-pane label="安全设置">
                <label class="tzSwitch">
                    <div>允许陌生人查看自己的信息</div>
                    <el-switch v-model="safety.mo" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </label>
                <label class="tzSwitch">
                    <div>允许队友查看自己的信息</div>
                    <el-switch v-model="safety.fri" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </label>
                <label class="tzSwitch">
                    <div>组队成功后，将组队队友信息保存至安全平台</div>
                    <el-switch v-model="safety.anq" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </label>
                <label class="tzSwitch">
                    <div>允许队友查看自己的信息</div>
                    <el-switch v-model="safety.fri" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </label>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        var nameTesting = (rule2, value, callback) => {
            if (!value) {
                return callback(new Error("真实名字不能为空"));
            }
            setTimeout(() => {
                if (!/^[\u4e00-\u9fa5]{2,4}$/.test(value)) {
                    callback(new Error("格式不正确"));
                } else {
                    callback();
                }
            }, 500);
        };
        var phoneTesting = (rule2, value, callback) => {
            if (!value) {
                return callback(new Error("手机号码不能为空"));
            }
            setTimeout(() => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("格式不正确"));
                } else {
                    callback();
                }
            }, 500);
        };
        var numTesting = (rule2, value, callback) => {
            if (!value) {
                return callback(new Error("身份证号码不能为空"));
            }
            setTimeout(() => {
                if (
                    !/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
                        value
                    )
                ) {
                    callback(new Error("格式不正确"));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            form1: {
                name: "用户xy973823",
                six: null,
                city: null,
                intro: `踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。`
            },
            form2: {
                name: null,
                six: null,
                num: null,
                phone: null
            },
            rule1: {
                name: [
                    {
                        required: true,
                        message: "请输入名字",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 11,
                        message: "长度在 1 到 7 个字符",
                        trigger: "blur"
                    }
                ],
                six: [
                    {
                        required: true,
                        message: "请选择其中一项",
                        trigger: "change"
                    }
                ],
                city: [
                    {
                        required: true,
                        message: "请输入你居住的城市",
                        trigger: "blur"
                    }
                ]
            },
            rule2: {
                name: [
                    {
                        required: true,
                        validator: nameTesting,
                        trigger: "blur"
                    }
                ],
                six: [
                    {
                        required: true,
                        message: "请选择其中一项",
                        trigger: "change"
                    }
                ],
                num: [
                    {
                        required: true,
                        validator: numTesting,
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        validator: phoneTesting,
                        trigger: "blur"
                    }
                ]
            },
            notice: {
                team: true,
                sys1: true,
                sys2: true,
                sys3: true,
                sys4: true
            },
            safety: {
                mo: false,
                fri: true,
                anq: true
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$message({
                        message: "修改成功",
                        type: "success"
                    });
                } else {
                    this.$message({
                        message: "请认真填写表单",
                        type: "warning"
                    });
                    return false;
                }
            });
        },
        cropping(e) {}
    }
};
</script>
<style>
div.installBody {
    margin: 20px 150px;
}

/* left */
div.installBody .el-tabs__nav-prev,
.el-tabs__nav-next {
    display: none;
}
div.installBody .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    font-weight: 600;
    font-size: 17px;
    padding: 10px 20px;
    height: 60px;
}
div.installBody
    .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item.is-active {
    background-color: #40a0ffc9;
    color: #000;
}
div.installBody .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable {
    padding: 30px 0 150px;
}

div.installBody label.tzSwitch {
    display: flex;
    margin: 10px;
    font-size: 15px;
    font-weight: 500;
    justify-content: space-between;
}
</style>